<template>
  <div id="building" style="text-align: center;margin:auto">
    <el-row :gutter="24">
      <el-col :span="3">
        <div style="margin-top: 100px">
          <el-image :src="require('@/assets/xiaohui.png')" fit="contain"></el-image>
        </div>
      </el-col>
      <el-col :span="18">
    <span style="color: #000000;
                font-size: 55px;
                font-weight: 800;
                font-family: 华光行草_CNKI;">
                食养坊
            </span>

        <el-carousel :interval="4000" type="card" height="200px" style="width: 60%;margin:auto">
          <el-carousel-item v-for="(item, index) in images" :key="index">
            <el-image :src="item" class="image" :preview-src-list="images"></el-image>
          </el-carousel-item>
        </el-carousel>
        <div style="padding-bottom: 20px">
          <el-row>
            <el-button type="primary" round class="buttonClass1" size="mini"
                       style="width:162px;height: 52px;margin-right: 100px" :icon="explore_icon"
                       @click="changestate(1)">
              食物检索
            </el-button>
            <el-button type="primart" round size="mini" class="buttonClass2" style="width:162px;height: 52px"
                       :icon="ai_icon" @click="changestate(2)">智能诊断
            </el-button>
          </el-row>
        </div>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card" style="margin-top: 100px">
          <div slot="header" class="clearfix">
            <span>联系开发者</span>
          </div>
          <div class="text item">
            北京林业大学
          </div>
          <el-link icon="el-icon-s-custom" href='http://it.bjfu.edu.cn/' target='_blank' style="font-size: 20px;">客服</el-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "TopBar",
  data() {
    return {
      explore_icon: "el-icon-sunrise-1",
      ai_icon: "el-icon-sunset",
      images: [
        "https://img0.baidu.com/it/u=1398370628,1799540562&fm=253&fmt=auto&app=138&f=JPEG?w=758&h=420",
        "https://img0.baidu.com/it/u=2135997566,530767068&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=387",
        "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00781-3864.jpg",
        "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00383-1766.jpg",
        "https://img2.baidu.com/it/u=2067591148,425183701&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
      ]
    }
  },
  methods: {
    changestate(value) {
      if (value === 1) {
        this.explore_icon = "el-icon-sunrise-1";
        this.ai_icon = "el-icon-sunset";
        this.$root.$emit("changestate", 1);
      } else {
        this.explore_icon = "el-icon-sunset";
        this.ai_icon = "el-icon-sunrise-1"
        this.$root.$emit("changestate", 2);
      }
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.text {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 240px;
}

#building {
  width: 80%;
  height: 30%;
  background-size: 100% 100%;
  opacity: 80%;
}

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 81.7%;
}

.buttonClass1 {
  width: 90px;
  height: 60px;
  padding: 0;
  font-size: 20px;
  background: #12a182;
  border-color: #12a182;
  color: #fff;

  line-height: 1.2;

  text-align: center;

  border-radius: 20px;

  cursor: pointer;

  transition: opacity 0.2s;

  outline: none;

  position: relative;
}

.buttonClass1::before {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  height: 100%;

  background-color: #000;

  border: inherit;

  border-color: #000;

  border-radius: inherit;

  transform: translate(-50%, -50%);

  opacity: 0;

  content: ' ';

}

.buttonClass1:active::before {

  opacity: 0.1;

}

.buttonClass2 {
  width: 90px;
  height: 60px;
  padding: 0;
  font-size: 20px;
  background: #97694F;
  border-color: #97694F;
  color: #fff;

  line-height: 1.2;

  text-align: center;

  border-radius: 20px;

  cursor: pointer;

  transition: opacity 0.2s;

  outline: none;

  position: relative;
}

.buttonClass2::before {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  height: 100%;

  background-color: #000;

  border: inherit;

  border-color: #000;

  border-radius: inherit;

  transform: translate(-50%, -50%);

  opacity: 0;

  content: ' ';

}

.buttonClass2:active::before {

  opacity: 0.1;

}
</style>
